var n1 = {//重大风险受控率
    title: {
    },
    tooltip: {
        trigger: 'axis',
        formatter:function (params) {
            var relVal = params[0].name;
            for (var i =0, l = params.length; i < l; i++){
                i === 2 ? relVal += '<br/>' + params[i].marker + params[i].seriesName + params[i].value + '%' : relVal += '<br/>' + params[i].marker + params[i].seriesName + params[i].value
            }
            return relVal;
        }
    },
    legend: {
        data:['重大隐患','重大危险源'],
        textStyle:{
            color:'#999999',
            fontSize:12
        },
        itemHeight:10,
        itemWidth:14,
        top:20,
        left:20,
    },
    grid: {
        containLabel: true,
        x:20,
        x2:20,
        bottom:10
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine:{
            show:false,
            lineStyle:{
                color:'#ccc'
            },
            splitLine:{
                show:false
            }
        },
        axisLabel: {
            textStyle:{
                color:'#999',
                fontSize:14
            }
        },
        data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    },
    yAxis: [
        {
            axisLine:{
                show:false,
                lineStyle:{
                    color:'#ccc'
                }
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#ccc'
                }
            },
            axisLabel: {
                textStyle:{
                    color:'#999',
                    fontSize:14
                }
            },
            type: 'value'
        },
        {
            type:'value',
            name:'',
            max:100,
            nameTextStyle:{
                color:'#999'
            },
            axisLine:{
                lineStyle:{
                    color:'#242668'
                }
            },
            splitLine:{
                lineStyle:{
                    color:'#242668'
                }
            },
            axisLabel: {
                textStyle:{
                    color:'#ccc',
                    fontSize:14
                },
                formatter:'{value}%'
            }
        }
    ],
    series: [
        {
            name:'重大隐患',
            type:'line',
            yAxisIndex:0,
            // stack: '总量',
            data:[100, 28, 17, 34, 28, 36, 20,38, 29, 40, 40, 40],
            color:'#f24b7a'
        },
        {
            name:'重大危险源',
            type:'line',
            yAxisIndex:0,
            data:[19, 8, 9, 9, 9, 13, 15,8, 8, 8, 12, 14],
            color:'#0e9cff'
        }
    ]
};
var n2 = { //重大风向数量
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['重大风险', '重大危险源'],
        top:20,
        x:20
    },
    toolbox: {
        feature: {
            // saveAsImage: {}
        }
    },
    grid: {
        x: 20,
        x2:20,
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisLabel: {
                textStyle:{
                    color:'#999',
                    fontSize:14
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                textStyle:{
                    color:'#999',
                    fontSize:14
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
        }
    ],
    series: [
        {
            name: '重大风险',
            type: 'line',
            stack: '总量',
            areaStyle: {
                color:'#d9dff4'
            },
             color:'#f24b7a',
             data:[100, 28, 17, 34, 28, 36, 20,38, 29, 40, 40, 40],
        },
        {
            name: '重大危险源',
            type: 'line',
            stack: '总量',
            areaStyle: {
                color:'#cfebff'
            },
            color:'#0e9cff',
            data: [220, 182, 191, 234, 290, 330, 310, 20,38, 29, 40, 40, 40]
        },
       
    ]
};

if($('.riskTrend1').length > 0){
    echarts.init(document.querySelector('.riskTrend1')).setOption(n1,true)
}
if($('.riskTrend2').length > 0){
    echarts.init(document.querySelector('.riskTrend2')).setOption(n1,true)
}
if($('.riskTrend3').length > 0){
    echarts.init(document.querySelector('.riskTrend3')).setOption(n1,true)
}
if($('.riskTrend4').length > 0){
    echarts.init(document.querySelector('.riskTrend4')).setOption(n1,true)
}
if($('.riskTrend5').length > 0){
    echarts.init(document.querySelector('.riskTrend5')).setOption(n1,true)
}
$('.riskTrendNav li').click(function(){
    $(this).addClass('active').siblings().removeClass('active') 
    var idx = $(this).index(),name=$(this).parent().attr('data-id')
    if(idx==0){
        echarts.init(document.querySelector(name)).setOption(n1)
    }else{
        echarts.init(document.querySelector(name)).setOption(n2)
    }
 })